<template>
  <div>
    <van-nav-bar title="黑马优购" fixed>
      <div class="left_arrow" @click="()=>{ $router.go(-1) }" slot="left">
        <van-icon name="arrow-left" />
        <span>返回</span>
      </div>
    </van-nav-bar>
    <van-swipe :autoplay="3000" class="top">
      <van-swipe-item v-for="(item, index) in imgList" :key="index">
        <img v-lazy="item.pics_mid" />
      </van-swipe-item>
    </van-swipe>
    <div class="box1">
      <div class="money">￥{{detailList.goods_price}}</div>
      <div class="xiangqing">
        <div class="left">{{detailList.goods_name}}</div>
        <div class="right">
          <van-icon name="star-o" />
          <div>收藏</div>
        </div>
      </div>
      <div class="kuaidi">快递：免运费</div>
    </div>
    <div class="whilteline"></div>
    <div class="box2">
      <div style="line-height: 40px;">
        <span>促销:</span>
        <span style="color: #666;">满300元减30元</span>
      </div>
      <div style="line-height: 40px;">
        <span>已选:</span>
        <span style="color: #666;">黑色/S/1件</span>
      </div>
    </div>
    <div class="whilteline"></div>
    <div class="box3" @click="$router.push(`/address_list`)">
      <div>
        <span style="margin-right: 10px;">送至</span>
        <span style="color: #666;">请选择收货地址</span>
      </div>
      <van-icon name="arrow" />
    </div>
    <div class="whilteline"></div>
    <van-tabs v-model="active">
      <van-tab title="图文详情" v-html="detailList.goods_introduce"></van-tab>
      <van-tab title="规格参数" style="font-size: 12px;">
        <van-row
          v-for="(item,index) in guigeList"
          :key="index"
          style="border-top: 1px solid #eee;"
          type="flex"
          justify="center"
        >
          <van-col style="border-right: 1px solid #eee;" span="12">{{item.attr_name}}</van-col>
          <van-col span="12">{{item.attr_vals}}</van-col>
        </van-row>
      </van-tab>
    </van-tabs>
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" />
      <van-goods-action-icon icon="cart-o" text="购物车" @click="$router.push(`/cart`)" :badge="$store.getters.totalGoods"/>
      <van-goods-action-button type="warning" text="加入购物车" @click="goShopping" />
    </van-goods-action>
  </div>
</template>

<script>
export default {
  data() {
    return {
      detailList: {},
      imgList: [],
      active: 2,
      guigeList: [],
      res: {},
      show: false,
      index: 0,
    };
  },
  methods: {
    async getGoodsDetail() {
      const idList = location.hash.split(":")[1];
      const res = await this.$http.get("/goods/detail", {
        params: { goods_id: idList }
      });
      this.imgList = res.message.pics;
      this.detailList = res.message;
      this.guigeList = res.message.attrs;
      this.res = res;
    },
    goShopping() {
      this.$store.commit("addGoodsm", this.res);
    }
  },
  created() {
    this.getGoodsDetail();
  }
};
</script>

<style lang="less" scoped>
.top {
  margin-top: 46px;
}
.box1 {
  padding: 0 5px;
}
.money {
  font-size: 20px;
  color: red;
  margin: 20px 0;
}
.xiangqing {
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-between;
}
.left {
  font-size: 13px;
  padding-right: 20px;
}
.right {
  width: 100px;
  text-align: center;
  border-left: 1px solid #eee;
  font-size: 10px;
  top: -20px;
}
.kuaidi {
  font-size: 13px;
  color: #666;
  font-weight: 700;
  line-height: 40px;
}
.whilteline {
  border-bottom: 6px solid #efefef;
}
.box2 {
  font-size: 12px;
  padding: 0 10px;
  height: 80px;
}
.box3 {
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-between;
  font-size: 12px;
  padding: 12px 10px 12px 10px;
}
.van-col {
  padding: 25px 0 25px 10px;
}
.van-goods-action {
  z-index: 100;
}
.van-tabs {
  overflow: hidden;
  margin-bottom: 46px;
}
</style>